<template>
  <div class="left-block1">
    <div class="data-title text-ellipsis">
      <a href="javascript:;" @click="downloadHanlde">{{ obj.name }}</a>
    </div>
    <div class="project-base">
      <p class="txt">
        <span class="t1">
      
        </span>
      </p>
      <ul class="pro-plan clearfix">
        <li class="f1" style="width: 50px">开始<br />时间</li>
        <li class="f2" style="width: 90px">
          <p class="date" style="font-size: 16px; line-height: 28px; margin-bottom: 0px">
            {{ obj.startTime | dateFormat("YYYY-MM-DD") }}
          </p>
          <p class="date" style="font-size: 16px; line-height: 26px">
            {{ obj.startTime | dateFormat("HH:mm") }}
          </p>
        </li>
        <li class="line" />
        <li class="f1" style="width: 50px; margin-left: 10px">
          结束<br />时间
        </li>
        <li class="f2" style="width: 90px">
          <p class="date" style="font-size: 16px; line-height: 28px; margin-bottom: 0px">
            {{ obj.endTime | dateFormat("YYYY-MM-DD") }}
          </p>
          <p class="date" style="font-size: 16px; line-height: 26px">
            {{ obj.endTime | dateFormat("HH:mm") }}
          </p>
        </li>
        <!--        <li class="f3">-->
        <!--          <p class="date">{{ obj.endTime|dateFormat('YYYY-MM-DD') }}</p>-->
        <!--          <p class="date">{{ obj.endTime|dateFormat('HH:mm') }}</p>-->
        <!--        </li>-->
        <li class="f4">
          <div style="width: 86px; height: 86px">
            <p-echarts :option="option" />
          </div>
        </li>
      </ul>
      <!-- <ul class="pro-bs">
        <li class="f1">项目<br />成员</li>
        <li v-for="(item, index) in memberList" :key="index" class="f2" @click="personalInfo(item)">
          <el-avatar v-if="item && item.address" :src="item.address | imgPath" :size="42" />
          <el-avatar v-else src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" :size="42" />
        </li>
              <li class="f2">-->
        <!--          <el-avatar :src="obj.picture|imgPath" icon="el-icon-user-solid" :size="42" />-->
        <!--        </li>-->
        <!--        <li class="f2">-->
        <!--          <el-avatar :src="obj.picture|imgPath" icon="el-icon-user-solid" :size="42" />-->
        <!--        </li>-->
        <!--        <li class="f2">-->
        <!--          <el-avatar :src="obj.picture|imgPath" icon="el-icon-user-solid" :size="42" />-->
        <!--        </li>-->
     <!--    </ul> -->

     <ul class="pro-bs">
        <li class="f1">项目<br />成员</li>
        <li v-for="(item, index) in memberList" :key="index" class="f2" @click="personalInfo(item)">
          <el-avatar v-if="item && item.address" :src="item.address | imgPath" :size="42" />
          <el-avatar v-else src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" :size="42" />
        </li>
        <!--        <li class="f2">-->
        <!--          <el-avatar :src="obj.picture|imgPath" icon="el-icon-user-solid" :size="42" />-->
        <!--        </li>-->
        <!--        <li class="f2">-->
        <!--          <el-avatar :src="obj.picture|imgPath" icon="el-icon-user-solid" :size="42" />-->
        <!--        </li>-->
        <!--        <li class="f2">-->
        <!--          <el-avatar :src="obj.picture|imgPath" icon="el-icon-user-solid" :size="42" />-->
        <!--        </li>-->
      </ul>
     
    </div>
 
    <el-dialog title="配合单位详情" :visible.sync="dialogVisible1" width="530px" class="wise-modal">
      <div class="wise-wrap">
        <div class="modal-wpline">
          <div class="modal-body">
            <div class="scroplist wise-detail">
              <div class="modal-header">
                <span class="txt">配合单位详情</span>
              </div>
              <div class="detail-info">
                <div class="base-info">
                  <el-avatar v-if="memberInfo && memberInfo.address" :size="96"
                    :src="memberInfo.address | imgPath" />
                  <el-avatar v-else src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                    :size="96" />
                  <!--                  <el-avatar icon="el-icon-user-solid" :size="96" />-->
                    <div class="name">
                    {{ memberInfo.name }}
                  </div>
               
                </div>
                <el-form label-width="100px" class="wise-form" label-suffix=":" style="padding-top: 30px">
                 
                  <el-form-item label="联系电话">
                    {{ memberInfo.phone }}
                  </el-form-item>
                  <el-form-item label="联系人">
                    {{ memberInfo.username }}
                  </el-form-item>
                  <el-form-item label="地址">
                    
                    {{ memberInfo.provinceName}}  {{memberInfo.cityName}}  {{memberInfo.countryName}}
                  </el-form-item>
                  <el-form-item label="单位名">
                    {{ memberInfo.name }}
                  </el-form-item>
                  <div class="text-center btn-show" style="margin-top: 80px">
                    <el-button type="primary" style="display: block; margin: 0 auto" @click="dialogVisible1 = false">
                      关闭
                    </el-button>
                  </div>
                </el-form>
                <div class="line3"></div>
                <div class="line4"></div>
              </div>
            </div>
          </div>
        </div>
      </div> 
    </el-dialog>
  </div>
</template>

<script>
  import PEcharts from "@/components/charts/pEcharts";
  import {
    downloadHandle,
    postHandle
  } from "@/api";
  import AutoRefreshMixin from "../mixin/AutoRefreshMixin";
  export default {
    name: "ProjectInfo",
    mixins: [AutoRefreshMixin],
    components: {
      PEcharts
    },
    props: {
      obj: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {
        memberList: [],
        memberInfo: {
          userInfo: {},
        },
        dialogVisible1: false,
      };
    },
    computed: {
      spaceId() {
        return this.$store.state.project.spaceId;
      },
      option() {
        return {
          title: {
            text: this.obj.timeLeft,
            textStyle: {
              color: "#50E3C2",
              fontSize: 16,
            },
            subtext: "剩余/时",
            subtextStyle: {
              color: "#cbcbcb",
              fontSize: 12,
            },
            itemGap: 0, // 主副标题距离
            left: "center",
            top: "center",
          },
          angleAxis: {
            max: this.obj.totalTime, // 满分
            clockwise: false, // 逆时针
            // 隐藏刻度线
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
          radiusAxis: {
            type: "category",
            // 隐藏刻度线
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
          polar: {
            center: ["50%", "50%"],
            radius: "180%", // 图形大小
          },
          series: [{
              type: "bar",
              data: [{
                name: "已进行",
                value: this.obj.totalTime - this.obj.timeLeft,
                itemStyle: {
                  normal: {
                    color: "#50E3C2",
                  },
                },
              }, ],
              coordinateSystem: "polar",
              roundCap: true,
              barWidth: 5,
              barGap: "-100%", // 两环重叠
              z: 2,
            },
            {
              // 灰色环
              type: "bar",
              data: [{
                value: this.obj.totalTime,
                itemStyle: {
                  color: " #4A4A4A",
                  shadowColor: "rgba(0, 0, 0, 0.2)",
                  shadowBlur: 5,
                  shadowOffsetY: 2,
                },
              }, ],
              coordinateSystem: "polar",
              roundCap: true,
              barWidth: 5,
              barGap: "-100%", // 两环重叠
              z: 1,
            },
          ],
        };
      },
    },
    watch: {
      spaceId(val) {
        this.autoRefreshHandle();
      },
      obj(v) {
        this.getMemberList(v.spaceId);
      },
    },
    mounted() {
      this.autoRefreshHandle();
    },
    methods: {
      refreshHandle() {
        // this.memberList = []
        if (this.spaceId) {
          this.getMemberList(this.spaceId);
        } else {
          this.memberList = [];
        }
      },
      downloadHanlde() {
        downloadHandle(process.env.VUE_APP_DOWNLOAD_URL, {
          obj: {
            url: process.env.VUE_APP_BASE_URL +
              process.env.VUE_APP_FILE_PATH +
              this.obj.construction,
          },
        }).then((res) => {
          let disposition = res.headers["content-disposition"]
            .replace(/\"/g, "")
            .split("=");
          let fileName = decodeURI(disposition[disposition.length - 1]);
          let blob = new Blob([res.data], {
            type: res.data.type
          });
          let downloadElement = document.createElement("a");
          let href = window.URL.createObjectURL(blob); // 创建下载的链接
          downloadElement.href = href;
          downloadElement.download = fileName; // 下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); // 点击下载
          document.body.removeChild(downloadElement); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放blob对象
        });
      },
      getMemberList(spaceId) {
        postHandle(
         // /api/v1/welder-sbtx-second/monitor-unit, {
          "/api/v1/welder-sbtx-second/monitor-unit", {
            d: {
              fields: [{
                name: "professionList"
              }],
              filters: [{
                field: "spaceId",
                operator: "EQUALS",
                value: spaceId
              } 
            ],
            },
          }
        ).then((res) => {
          this.memberList = res.result;
        });
      },
      personalInfo(item) {
        this.memberInfo = item;
        this.dialogVisible1 = true;
      },
    },
  };
</script>

<style scoped>
  .left-block1 .pro-bs li.f2 {
    margin-right: 12px;
  }
</style>